require('../css/myData.less');
require('../css/commom/basic.css');
const echarts = require('echarts');

document.ready(function () {
    let headerTop = document.querySelector(".headerTop")
    // 返回按钮
    headerTop.addEventListener('click', function () {
        history.back();
    })

    //柱形图
    var sportsOne = echarts.init(document.getElementById('sportsOne'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '近七天的运动时长'
        },
        tooltip: {},
        legend: {
            data: ['时长']
        },
        xAxis: {
            data: ["11-5", "11-6", "11-7", "11-8", "11-9", "11-10"]
        },
        yAxis: {},
        series: [{
            name: '时长',
            type: 'bar',
            data: [20, 40, 20, 80, 100, 40]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    sportsOne.setOption(option);


    // 饼形图
    var sportsCake = echarts.init(document.getElementById('sportsCake'));
    var optionCake = {
        title: {
            text: '运动分类',
            subtext: '运动',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                name: '运动',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 25, name: '跑步' },
                    { value: 35, name: '骑行' },
                    { value: 40, name: '训练' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    sportsCake.setOption(optionCake);


    // 横行图
    var sportsSeven = echarts.init(document.getElementById('sportsSeven'));
    let optionX = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // Use axis to trigger tooltip
                type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
            }
        },
        legend: {
            data: ['运动', '骑行', '训练']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: ['11-5', '11-6', '11-7', '11-8', '11-9', '11-10', '11-11']
        },
        series: [
            {
                name: '运动',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [320, 302, 301, 334, 390, 330, 320]
            },
            {
                name: '骑行',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '训练',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
            },

        ]
    };
    sportsSeven.setOption(optionX);




    // 训练次数图
    var sportsNum = echarts.init(document.getElementById('sportsNum'));
    
    let optionSpot = {
        xAxis: {
            type: 'category',
            data: ['11-7', '11-8', '11-9', '11-10']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [2, 6, 4, 8],
            type: 'line'
        }]
    };
    sportsNum.setOption(optionSpot);


})